<script setup lang="ts">
import { CodeView, SvgIcon } from '@base-comp'
import { ElMessage } from 'element-plus'
import { ref, Ref, unref } from 'vue';
import { propTypes } from '@/utils/propTypes'
import { useClipboard } from '@hooks/useClipboard'
const props = defineProps({
  code: propTypes.string
})
const { copy } = useClipboard(ref(props.code))
const copyCode = () => {
  copy()
  ElMessage.success('已复制')
}

const viewShow :Ref<boolean> = ref(false)
const changeViewShow = () => {
  viewShow.value = !unref(viewShow)
}

</script>
<template>
  <div class="preview">
    <div class="previewDemo">
      <slot />
    </div>
    <div class="toolbar" style="viewShow ? 'margin-bottom: 10px' : ''">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="复制"
        placement="top"
      >
        <el-icon size="16" style="margin-top: 4px;cursor: pointer;" @click="copyCode"><CopyDocument /></el-icon>
      </el-tooltip>
      <el-tooltip
        effect="dark"
        content="展开"
        placement="top"
      >
        <svg-icon icon-name="code" :size="18" style="margin-left: 10px;cursor: pointer;outline: none;" @click.stop="changeViewShow"></svg-icon>
      </el-tooltip>
    </div>
    <transition name="opacity-transform" mode="in-out" appear>
      <code-view
        :code="code"
        style="flex: 1"
        v-show="viewShow"
        class="codeView"
      ></code-view>
    </transition>
  </div>
</template>
<style scoped lang="scss">
.preview {
  display: flex;
  flex-direction: column;
  .previewDemo, .codeView {
    padding: 20px;
  }
  .codeView {
    width: calc(100% - 50px);
    margin: 10px auto;
  }
  border: 1px solid var(--el-border-color);
}
.toolbar {
  text-align: right;
  padding-right: 10px;
  margin-top: 10px;
  line-height: 50px;
  border-top: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
}
</style>